<template>
  <div class="app">
    <myNavbar title="签约合同"></myNavbar>

    <div class="cashier-picture">
      <image  class="cashier-picture-iamge" src="http://cdnx.365.rzico.com/10200/upload/20211222/9c4e021b-b5cb-489c-a109-3b2b851b8dd3.jpg"></image>
    </div>

<!--    <div class="information">-->
<!--      <div class="information-left">-->
<!--        <div>-->
<!--          <image class="information-image" src="https://www.qmin365.cn/addons/ewei_shopv2/static/images/noface.png"></image>-->
<!--        </div>-->
<!--        <div >-->
<!--          <text class="information-image-text">chen</text>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div  class="information-right">-->
<!--        <div class="information-share">-->
<!--          <text class="information-share-text">份额:3份</text>-->
<!--        </div>-->
<!--        <div class="information-certificate">-->
<!--          <text class="information-certificate-text">兑换券:3500</text>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <div class="rule">
      <div class="rule-title-div center">
        <text class="rule-title-text">签约规则</text>
      </div>
      <div class="rule-contain-div center">
        <text class="rule-contain-text">请先发起签约签完合约后回来查看签约状态。</text>
      </div>
    </div>

<!--    <div class="paymentAmount">-->
<!--      <div class="paymentAmount-input-div">-->
<!--        <input placeholder="请输入兑换券分润份额" class="paymentAmount-input-contain"/>-->
<!--        <input class="paymentAmount-input-contain" v-model="profitShare" name="input" type="number"   placeholder="请输入兑换券分润份额" />-->
<!--        <input class="cash-center-input cash-center-input" v-model="amount" name="input" type="number" :maxlength="maxlength"   placeholder="请输入付款金额" />-->
<!--      </div>-->
<!--    </div>-->
    <div class="confirmExchange" @click="createFlowOneStepClick">
      <div class="confirmExchange-wrap">
        <text class="confirmExchange-text">发起签约</text>
      </div>
    </div>
    <div class="confirmExchange">
      <div class="confirmExchange-wrap">
        <text class="confirmExchange-text">查看签约</text>
      </div>
    </div>
  </div>

</template>
<script>

import myNavbar from '../../../components/myNavbar/myNavbar.vue'

import {createFlowOneStep, executeUrl} from "../../../api/createFlowOneStep";

const pay = app.requireModule("eeui/pay");

export default {
  name: "nearbyShopsDetails.vue",
  data() {
    return {
      profitShare:""
    };
  },
  components: {
    myNavbar
  },
  created() {
    console.log(app.config.params)
  },
  methods: {
    createFlowOneStepClick(){
         let params = 1
      // let params = 3
      console.log("1111111111111111111")
      createFlowOneStep(params).then(res=>{
        this.geTexecuteUrl(res.data.id)
      })
    },

    geTexecuteUrl(esignRecordId){
      let params = esignRecordId
      executeUrl(params).then(res=>{
        console.warn(res)
        console.warn(res)
        // eeui.openWeb('https://smlt.esign.cn/glWMtaMnPx0N');
        eeui.openWeb(res.data.shortUrl);


      })
    }

  }

}
</script>
<style scoped>
.app {
  flex: 1;
  background-color: rgb(248, 248, 248);
}
.cashier-picture{
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 750px;
}
.cashier-picture-iamge{
  width: 750px;
  height:300px
}

.paymentAmount{
  width: 750px;
}
.paymentAmount-input-div{
  box-sizing: border-box;
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  width: 700px;
  margin-left: 25px;
  background-color: white;
  padding-left: 50px;
  padding-top: 40px;
  padding-bottom: 40px;
  border-radius: 16px;
}

.paymentAmount-input-contain{
  margin-left:20px;
}

.information-image{
  width: 80px;
  height: 80px;
  border-radius: 50px;
}

.information{
  height: 170px;
  width: 750px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: white;
}

.information-left{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 50px;
}

.information-right{
  padding-right: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.information-image-text{
  margin-left: 20px;
  font-size: 32px;
}

.rule{
  width: 750px;
}

.rule-title-text{
  padding-top: 30px;
  margin-left: 50px;
  font-size: 32px;
  color: red;
}
.rule-contain-text{
  font-size: 32px;
  color: red;
  margin-left: 120px;
}
.rule-contain-div{
  height: 100px;
}
.rule-title-div{
  height: 100px;
}
.center{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.confirmExchange{
  margin-top: 100px;
  width: 750px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.confirmExchange-wrap{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:300px;
  height: 100px;
  background-color:#ff8400;
  border-radius: 50px;
}
.confirmExchange-text{
  color: white;
  font-size:32px;
}
.information-certificate{
  margin-top: 10px;
}
.information-share-text{
  font-size: 30px;
}
.information-certificate-text{
  font-size: 30px;
}

.cash-center-input {
  background-color: #fff;
  flex: 1;
  min-height: 65px;
}

</style>







